<template>
  <div>
    <div id="back"></div>
    <!-- 用户头像-->
    <div style="padding-left: 1850px;">
      <el-button type="info" icon="el-icon-user-solid" circle @click="dialogVisible = true"></el-button><br />
      <span style="font-size: 10px;" >&nbsp;&nbsp;登录</span>
    </div>
    
    <!-- 登录对话框-->
    <el-dialog title="登录" :gutter="20" :visible.sync="dialogVisible" width="30%" @close="closeDialog" :close-on-click-modal="false">

      <el-form :model="userModel" :rules="rules" ref="userRef" label-width="100px" class="demo-ruleForm">

        <el-form-item  prop="name" label="用户名">
          <el-col span="20">
          <el-input v-model="userModel.name" placeholder="用户名" ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item prop="password" label="密码" style="margin-top:40px">
          <el-col span="20">
          <el-input placeholder="密码" v-model="userModel.password" show-password></el-input>
          </el-col>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userBtn">登录</el-button>
        <el-button @click="clear">重置</el-button>
      </span>

      <div style="padding-top: 80px;">
      没有账号？去<router-link to="register" >注册</router-link>
      <router-link to="forgetPassword" style="margin-left:360px">忘记密码</router-link>
      </div>
      
    </el-dialog>
        <!-- 定义路由展现页面-->
        <router-view></router-view>
      
  </div>
</template>

<script>

  export default {
    data(){

      const checkPhone = (rule, value, callback) => {
        //定义校验手机号的正则语法
        const phoneRege = /^1[34578][0-9]{9}$/
        if (phoneRege.test(value)) {
          return callback()
        }
        callback(new Error('请填写正确的手机号'))
      }

      return {
        dialogVisible: true,
        userModel: {
          name:  '',
          password: '',
        },
        //数据校验规则
        rules: {
          name: [
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                  { min: 1, max: 8, message: '长度为1-8个字符', trigger: 'blur' },
                ],

          password: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],

        }
      }
    },
    methods: {
      //校验用户数据
      userBtn(){
        this.$refs.userRef.validate(async valid => {
          //如果校验失败 则停止数据
          if(!valid) return
          //console.log(this.addUserModel)
          const {data: result} = await this.$http.post('/user/userModel',this.userModel)
          if(result.status !== 200) return this.$message.error("用户不存在或密码有误")
          this.$message.success("登录成功")
          //关闭对话框
          this.dialogVisible = false
          
          let token = result.data
          window.sessionStorage.setItem("token",token)

        //用户登录成功之后,跳转到home页面
          this.$router.push("/UserManage")
        })
      },

      clear(){
        this.userModel={}
      }

    }

  }
</script>

<style>
  #back{
  		width: 100%;
  		  	height: 100vh;
  		  	background: url("../images/1.png") center center no-repeat;
  		  	background-size: 100% 100%;
  			z-index: -1;
  			position: absolute;
  	}

</style>
